import { ajax } from "./ajax.js";
import * as checkCode from "./checkCode.js";

var urlH = "http://localhost:8080";

var inputUsername1 = document.querySelector("#exampleInputUsername1");//账号框1
var inputUsername2 = document.querySelector("#exampleInputUsername2");//账号框2
var inputPassword1 = document.querySelector("#exampleInputPassword1");//密码框
var msg = document.querySelector(".msg");//提示信息

inputUsername1.style.display = "block";
inputUsername2.style.display = "none";

//校验表单中的信息
function getFormData(form){
    //读取表单中的数据
    var username1 = form.username1.value;
    var username2 = form.username2.value;
    var password = form.password.value;
    var email = form.email.value;
    var checkCode = form.checkCode.value;
    //规则校验
    //账号 密码不为空
    if((!username1 || !password) && (!username2 || !password)){
        return {
            status: 401,
            msg: '信息填写不完全，请校验后提交'
        }
    }
    //username 为字符串 限制6位
    if(inputUsername1.style.display == "block"){
        var usernmae1Reg = /^(?![^a-zA-Z]+$)(?!\D+$).{3,10}$/;
        console.log("1111");
        if (!usernmae1Reg.test(username1)) {
            return {
                status: 401,
                msg: '账号不规范'
            }
        }
    }
    if(inputUsername2.style.display == "block"){
        var usernmae2Reg = /^(?![^a-zA-Z]+$)(?!\D+$).{3,10}$/;
        if (!usernmae2Reg.test(username2)) {
            return {
                status: 401,
                msg: '账号不规范'
            }
        }
    }
    //password 为字符串 限制6位
    var passwordReg = /^(?![^a-zA-Z]+$)(?!\D+$).{3,10}$/;
    if(!passwordReg.test(password)){
        return {
            status: 401,
            msg: '密码不规范'
        }
    }

    return {
        status: 200,
        data: {
            username1,
            username2,
            password,
            email,
            checkCode
        }
    }
}
//封装函数 当表单中的校验幸喜不成功时
function checkForm(fromDataMsg){
    if (fromDataMsg === '密码不规范') {
        inputPassword1.style.borderColor = "red";
        msg.innerHTML = fromDataMsg;
    }
    if(fromDataMsg === '账号不规范'){
        inputUsername1.style.borderColor = "red";
        msg.innerHTML = fromDataMsg;
    }
}


//登录
//点击登录
var login = document.querySelector(".login");
login.onclick = function(e){
    e.preventDefault();
    // var msg = document.querySelector(".msg");
    var form = document.getElementsByTagName("form")[0];
    var formData = getFormData(form);
    console.log(formData);
    // 如果数据校验未通过则弹出错误信息
    if(formData.status == '401'){
        // alert(formData.msg);
        checkForm(formData.msg);
        
    }else{
        inputPassword1.style.borderColor = "#ced4da";
        inputUsername1.style.borderColor = "#ced4da";
        var url = urlH + "/user/login?";
        var data = "username=" + formData.data.username1 + "&" + "password=" + formData.data.password;
        ajax('post',url,data,function(res){
            if(res.status == '200'){
                msg.innerHTML = res.msg;
                // alert("登录成功");

                // var a = document.getElementsByTagName("a")[0];
                // a.href = url + data;
                // a.click();
                //点击登陆后跳转页面
                window.location.href = "./html/Main-Page.html";


                // console.log(formData.data);
            }else{
                // alert(res.msg + "账号或密码错误");
                msg.innerHTML = res.msg + "账号或密码错误";
                // msg.style.display = "block";
            }
        },true)
    }
}


//注册
// var inputUsername2 = document.querySelector("#exampleInputUsername2");//账号框2
//账号框聚焦事件
inputUsername2.onblur = function(){
    var data = "?username=" + inputUsername2.value;
    var url = urlH + "/user/isUserName";
    ajax('get',url,data,function(res){
        if(res.status !== 200){
            msg.innerHTML = res.msg;
            inputUsername2.style.borderColor = "red";
        }else if(res.status == 200){
            msg.innerHTML = "";
            inputUsername2.style.borderColor = "#ced4da"
        }
    },true)
}

//注册验证码

var codeImg = document.getElementsByClassName("code-img")[0];//注册码

var checkCodeMsg;//接收验证码的返回信息

//页面第一次加载时出现的验证码信息
checkCodeMsg = checkCode.checkCodeM();
codeImg.setAttribute("src",checkCodeMsg.data.base64Code); 
//点击验证码图片时，切换验证码图片 同时改变 checkCodeMsg 里保存的验证码的相关信息
codeImg.onclick = function(){
    checkCodeMsg = checkCode.checkCodeM();
    codeImg.setAttribute("src",checkCodeMsg.data.base64Code); 
    // console.log(codeImg.scr);
}

//点击注册
var logon = document.querySelector(".logon");
logon.onclick = function(e){
    e.preventDefault();
    var form = document.getElementsByTagName("form")[0];
    var formData = getFormData(form);
    console.log(formData);
    //如果数据校验未通过则弹出错误信息
    if(formData.status == '401'){
        // alert(formData.msg);
        checkForm(formData.msg);
    }else{
        var url = "http://localhost:8080/user/register";
        var data = "username=" + formData.data.username2 + "&password=" + formData.data.password  + "&email=" + formData.data.email + "&checkCode=" + formData.data.checkCode + "&" + checkCodeMsg.data.tokenName + "=" +  checkCodeMsg.data.token;
        ajax('post',url,data,function(res){
            if(res.status == '200'){
                alert("注册成功");
                location.reload();//页面刷新
            }else{
                alert(res.msg);
                //如果验证码错误，验证码清空且验证码图片刷新
                if(res.msg == "验证码错误!"){
                    //输入的验证码清空
                    var codeInput = document.querySelector(".code");
                    codeInput.value = "";
                    //验证码图片刷新
                    checkCodeMsg = checkCode.checkCodeM();
                    codeImg.setAttribute("src", checkCodeMsg.data.base64Code);
                }
            }
        },true)
    }
}